<template>
  <div class="shop">
    <el-button size="mini" type="primary" @click="addAmount">新增金额</el-button>
    <!-- <el-button sytle="margin-left:12px;" size="mini" type="primary" @click="discountSetting">折扣设置</el-button> -->

    <!-- <el-button size="mini" type="primary" style="float:right;" @click="bindCardSetting">绑卡设置</el-button> -->

    <el-table
      :data="tableData"
      max-height="680"
      style="width:100%;margin-top:12px;"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="红包金额" >
        <template slot-scope="scope">
          {{scope.row.price}}元
        </template>
      </el-table-column>
      <el-table-column label="售价" >
        <template slot-scope="scope">
          ¥{{scope.row.salePrice}}
        </template>
      </el-table-column>
      <el-table-column label="折扣" prop="rebate"></el-table-column>
      <el-table-column label="展示排序" prop="orderNum"></el-table-column>
      <el-table-column label="上架状态">
       <template slot-scope="scope">
          <el-switch :key="scope.row.id"
            :active-value="0"
            :inactive-value="1"
            :value="scope.row.status"
            @change="isUseActivityChange(scope.row.id,$event,scope.row)"></el-switch>
     
          <span  v-if="scope.row.status == 1"
            > 下架</span>
            <span  v-if="scope.row.status == 0"
            > 上架</span>
       </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="editRedmanagent(scope.row)" >编辑</el-button>
          <el-button size="mini" type="primary" @click="deleteRedmanagent(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        @current-change="pageChange"
        :current-page="page"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!--新增充值金额-->
    <jdialog :title="addTitle" :visible.sync="isShowAddRecharge" width="640px">
      <el-form :model="addform" label-width="80px" style="padding:20px 36px 20px  20px;">
        <el-form-item label="充值金额:">
          <el-input v-model="addform.price" placeholder="请输入充值金额" type="number" min="0">
            <p class="note_back" slot="suffix">元</p>
          </el-input>
        </el-form-item>
        <el-form-item label="销售金额" prop="salePrice">
          <el-input size="mini" type="number" v-model="addform.salePrice" placeholder="" maxlength="10" />
      </el-form-item>
        <el-form-item label="展示排序:">
          <el-input v-model="addform.orderNum" placeholder="请输入排序" type="number" min="1" max="99"></el-input>
          <p style="color:#f4222d;font-size:12px;">序号越大越靠前展示，输入序号1~99</p>
        </el-form-item>
      </el-form>

      <div style="text-align:center;margin-bottom:12px;">
        <el-button size="mini" @click="cancelAddRecharge">取消</el-button>
        <el-button size="mini" type="primary" @click="certainAddRecharge">确定</el-button>
      </div>
    </jdialog>

    <!--红包绑定设置-->
    <jdialog title="红包绑定设置" :visible.sync="isShowRedpacketBind" width="720px">
      <div v-for="(item,index) in bindPacketList" :key="'p'+index" class="bindcard">
        <div class="bind_title">{{index+1}}</div>

        <div class="addbtn" @click="deleteBindNumber(index)" v-if='index !== 0'>X</div>
        <el-input
          type="number"
          size="mini"
          style="width:168px;margin-left:24px;margin-top:36px;"
          v-model="item.beginNumber"
          placeholder="            起始卡号段"
        ></el-input> -----
        <el-input
          type="number"
          size="mini"
          style="width:168px;margin-left:-2px;"
          v-model="item.endNumber"
          placeholder="            末尾卡号段"
          min="0"
        ></el-input>
        <el-input
          type="number"
          size="mini"
          v-model="item.money"
          style="width:168px;margin-left:36px;"
          placeholder="            输入红包配额"
          min="0"
        ></el-input>
      </div>

      <div class="addBindCard" @click="addCardNumber">+ 添加分段</div>
      <div style="text-align:center; margin:20px 0;">
          <el-button size='mini' @click="cancelAddCard">取消</el-button>
          <el-button type='primary' size="mini" @click="certainAddBindCard">确定</el-button>
      </div>
    </jdialog>


    <!--充值折扣设置-->
    <jdialog title="充值折扣设置" :visible.sync='isDiscountSetting' width='720px'>
        <div style="padding:20px;">
            <span>最低充值金额</span><el-input type='number' v-model="min_price" min="1" style="width:240px;margin: 0 12px ;" ><p 
                slot="suffix" class="suffix_icon">元</p></el-input> <span style="color:#999999;">自定义充值金额输入最低限制</span>
                <br/>
            <span>最高充值金额</span><el-input type='number' v-model="max_price" style="width:240px;margin: 12px 12px 0;"><p 
 slot="suffix" class="suffix_icon">元</p></el-input> <span style="color:#999999;">自定义充值金额输入最高限制</span>

           <div class="range-recharge">
             <div v-for="(item,index) in rebate_config" :key="'n'+index" style="margin-top:12px;">
               <span>小于等于</span> <el-input type='number' v-model="item.price" :min="inpuntDiscount" style="width:180px;margin: 0 12px ;" @change="getMaxdiscountRecharge(item.price)"><p 
                slot="suffix" class="suffix_icon" >元</p></el-input>-----<el-input type='number' v-model="item.rebate" :max="minDiscount" min="0" style="width:180px;margin: 0 12px ;" @change="getMaxMoneyDiscount(item.rebate)"><p 
                slot="suffix" class="suffix_icon">折</p></el-input>

                <el-button round v-if="index < 5" size="mini" @click="addDiscountSetting">添加</el-button> 
                <el-button round v-if="index > 0 && index <=5" size="mini" @click="deleteDiscountSetting(index)">删除</el-button> 
             </div>

             <div style="margin-top:12px;">
                <span>        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大于</span> <el-input type='number' v-model="maxDiscountRecharge" :min="inpuntDiscount" style="width:180px;margin: 0 12px ;"><p 
                slot="suffix" class="suffix_icon">元</p></el-input>-----<el-input type='number' v-model="maxDiscount" :max="minDiscount" min="0" style="width:180px;margin: 0 12px ;"><p 
                slot="suffix" class="suffix_icon">折</p></el-input>
             </div>
           </div>
        </div>

        <div style="text-align:center;margin-bottom:12px;">
           <el-button size="mini" @click="cancelDiscountSetting">取消</el-button>
           <el-button size="mini" type="primary" @click="certainDiscount">确定</el-button>
        </div>
    </jdialog>
  </div>
</template>

<script>
// import {redPacketPriceSearch, redPacketPriceCreate,redpacketPriceIdUp,
//        redpacketPriceIdDown, redpacketPriceIdUpdate,redPacketPriceIdDelete,
//        redpacketRebateCreate,redPacketRebateList} from "@/api/redpacket.js"
import {
        isIntegerNotMust
    } from '../../utils/validator'
    import {
        recharge_package_list,
        recharge_package_save,
        recharge_package_del
    } from '../../api/recharge';
export default {
  data() {
    return {
      tableData: [],
      page: 1,
      size: 15,
      total: 0,
      
      addTitle:'新增充值金额',
      //新增充值金额
      isShowAddRecharge: false,
      addform: {

        id: undefined,
        price: undefined,
        salePrice: undefined,
        orderNum: 0,
      },
      currentId:'',

      //红包绑定设置
      isShowRedpacketBind: false,
      bindPacketList: [{ beginNumber: "", endNumber: "", money: "" }],

      //充值折扣设置
      isDiscountSetting:false,
      min_price:'',
      max_price:'',
      rebate_config:[{price:'',rebate:''}],
      maxDiscountRecharge:'',
      maxDiscount:'',
     
     //最低折扣
      minDiscount:'',
      //第二个输入的不能小于此数
      inpuntDiscount:0,

    };
  },
  created() {
     this.getredPacketPriceSearchData()
     
  },
  methods: {
    //新增金额
    addAmount() {
      this.addTitle = '新增充值金额'
      this.isShowAddRecharge = true;
    },
    //折扣设置
    discountSetting() {
      this.getredPacketRebateListData()
    },
    bindCardSetting() {
      this.isShowRedpacketBind = true;
    },

    //分页
    pageChange(page) {
      this.page = page;
    },

    //确定新增金额
    certainAddRecharge() {
      if(!this.addform.price || Number(this.addform.price) <=0){
        this.$message.error('红包金额不能为空或者小于0')
        return
      }

      if(!this.addform.orderNum || Number(this.addform.orderNum) < 1 || Number(this.addform.orderNum) >99){
        this.$message.error('排序不能为空或者在1~99范围')
        return
      }
      if(this.currentId && this.addTitle == '编辑充值金额'){
        this.getredpacketPriceIdUpdateData(this.currentId,this.addform)
      }else{
         this.getredPacketPriceCreateData()
      }
    },

    //取消新增金额
    cancelAddRecharge() {
      this.isShowAddRecharge = false;
      this.addform = {
        id: undefined,
            price: undefined,
            salePrice: undefined,
            orderNum: 0,
      };
    },

    //删除添加的卡号段
    deleteBindNumber(index) {
      this.bindPacketList.splice(index, 1);
    },
    //添加分号段
    addCardNumber() {
        if(this.bindPacketList.length >= 4){
           this.$message.error('最多绑定4个');
        }else{
           this.bindPacketList.push({ beginNumber: "", endNumber: "", money: "" });
        }
      
    },
    //取消添加分号段
    cancelAddCard(){
      this.isShowRedpacketBind = false;
      this.bindPacketList = [{ beginNumber: "", endNumber: "", money: "" }]
    },
    //确定添加分号段
    certainAddBindCard(){
        this.isShowRedpacketBind = false;
      this.bindPacketList = [{ beginNumber: "", endNumber: "", money: "" }]
    },
    //添加充值折扣设置
    addDiscountSetting(){
     if(this.rebate_config.length <=5){
        this.rebate_config.push({price:'',rebate:''})
     }else{
       this.$message.error('不能超过6个')
     }
    },

    //删除充值折扣设置
    deleteDiscountSetting(index){
     this.rebate_config.splice(index,1)
    },
    //确定充值折扣设置
    certainDiscount(){

      if(!this.min_price || Number(this.min_price) <100){
        this.$message.error('最低充值金额不能为空且不能小于100')
        return
      }
      if(!this.max_price || Number(this.max_price) > 1000000){
        this.$message.error('最高充值金额不能为空且不能大于1,000,000')
        return;
      }
      if(Number(this.max_price) <= Number(this.min_price)){
        this.$message.error('最高充值金额不能低于最低充值金额')
        return;
      }
   

      if(!this.maxDiscountRecharge || Number(this.maxDiscountRecharge) >= Number(this.max_price)){
        this.$message.error('大于金额不能为空且不能大于最高充值金额')
        return;
      }
      console.log(this.maxDiscount)
      if(!this.maxDiscount){
        this.$message.error('大于所填折扣不能为空')
        return;
      }
      
      var priceForm = this.rebate_config[0]
      var array = this.rebate_config
      this.rebate_config.map((item,index) => {
        
        var per = 1
        console.log(item.price)
        console.log(item.rebate)
         if(!item.price && !item.rebate){
           this.$message.error('金额和折扣不能为空')
           per = 0
           return
         }

         if(Number(item.price) < Number(this.min_price)){
           this.$message.error('不能小于最低充值金额')
           per = 0
           return
         }
        
         if(Number(item.price) > Number(this.maxDiscountRecharge)){
           this.$message.error('金额不能大于最下面大于选项所填金额')
           per = 0
           return
         }
         if(Number(item.rebate) < Number(this.maxDiscount)){
           this.$message.error('折扣不能低于最下面大于选项所填折扣')
           per = 0
           return
         }

         if(Number(priceForm.price) < Number(item.price) && Number(priceForm.rebate) <= Number(item.rebate) ){
           this.$message.error('金额越大,折扣应该越低')
           per = 0
           return
         }else{
           this.priceForm = item
         }
         console.log(this.rebate_config)
         if(index == this.rebate_config.length-1 && per ==1){
           console.log(array)
            this.getredpacketRebateCreateData(array)
         }
      })
        
    }, 
    //取消充值折扣设置
    cancelDiscountSetting(){
      this.isDiscountSetting = false
      this.min_price='',
      this.max_price='',
      this.rebate_config=[{price:'',rebate:''}],
      this.maxDiscountRecharge='',
      this.maxDiscount=''
    },
    getMaxdiscountRecharge(minAmount){

       this.inpuntDiscount = minAmount
    },
    getMaxMoneyDiscount(minDiscount){
      this.minDiscount = minDiscount
    },
    isUseActivityChange (id, e,row) {
      //更新成功后重新获取商品
      // this.getshoptypeopenorclose(id, e);
      console.log('id:' + id + ',e:' + e)
      this.addform = row
      this.addform.status = e
      this.getredpacketPriceIdUpdateData()
      // if(e == 1){
      //   //  上架
      //    this.getredpacketPriceIdDownData(id)
        
      // }else{
      //  this.getredpacketPriceIdUpData(id)
      // }
    },

    //编辑
    editRedmanagent(data){
     
      this.addTitle = '编辑充值金额'
      this.currentId = data.id
      this.addform = {
        id:data.id,
        price: data.price,
        salePrice: data.salePrice,
        orderNum: data.orderNum,
      };
      this.isShowAddRecharge = true
      
    },
    //删除
    deleteRedmanagent(id){
      this.$confirm('删除后，用户将不可充值该金额，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.getredPacketPriceIdDeleteData(id)
      }).catch(() => {
        console.log('cancel')
      });
    },
    //删除充值红包
    async getredPacketPriceIdDeleteData(id){
     let res = await recharge_package_del(id)
     if(res.code === 200){
      this.$message.success(res.message)
      this.getredPacketPriceSearchData()
     }else{
       this.$message.error(res.message)
     }
    },
    //充值红包上架
    async getredpacketPriceIdUpData(id){
      let res = await redpacketPriceIdUp(id)
      if(res.code === 10000){
        this.$message.success(res.message)
        this.getredPacketPriceSearchData()
      }else{
        this.$message.error(res.message)
      }
    },
    //充值红包下架
    async getredpacketPriceIdDownData(id){
      let res = await redpacketPriceIdDown(id)
      if(res.code === 10000){
        this.$message.success(res.message)
        this.getredPacketPriceSearchData()
      }else{
        this.$message.error(res.message)
      }
    },
    //充值红包金额创建
    async getredPacketPriceCreateData(){
      let res = await recharge_package_save(this.addform)
      if(res.code === 200){
         this.isShowAddRecharge = false;
         this.getredPacketPriceSearchData()
      this.addform = {
        id: undefined,
            price: undefined,
            salePrice: undefined,
            orderNum: 0,
      };
      }else{
        this.$message.error(res.message)
      }
    },

    //红包充值金额编辑
    async getredpacketPriceIdUpdateData(id,form){
      console.log(form)
      let res  = await recharge_package_save(this.addform)
      if(res.code === 200){
        this.$message.success(res.message)
        this.isShowAddRecharge = false;
        this.currentId = ''
         this.getredPacketPriceSearchData()
      this.addform = {
        id: undefined,
            price: undefined,
            salePrice: undefined,
            orderNum: 0,
      };
      }else{
        this.$message.error(res.message)
      }
    },
    //折扣设置
    async getredpacketRebateCreateData(array){
      var pushArray = array.concat({price:this.maxDiscountRecharge,rebate:this.maxDiscount})
    
      var form = {
        min_price:this.min_price,
        max_price:this.max_price,
        rebate_config:JSON.stringify(pushArray)
      }
     let res = await redpacketRebateCreate(form)
     if(res.code === 10000){
       this.$message.success(res.message)
        this.isDiscountSetting = false
      this.min_price='',
      this.max_price='',
      this.rebate_config=[{price:'',rebate:''}],
      this.maxDiscountRecharge='',
      this.maxDiscount=''
     }else{
       this.$message.error(res.message)
     }
    },
    //获取列表
    async getredPacketPriceSearchData(){
     var url = 'page='+this.page
     let res = await recharge_package_list(url)
     if(res.code === 200){
        this.tableData = res.data
        this.total = res.data.total
     }else{
       this.$message.error(res.message)
     }
    },

    //获取折扣设置详情
    async getredPacketRebateListData(){
     let res  = await redPacketRebateList()
     if(res.code === 10000){
          this.isDiscountSetting = true;
      console.log(res)
      this.min_price = res.data.red_packet_price.min_price
      this.max_price = res.data.red_packet_price.max_price

      if(res.data.list){
         var array = []
         res.data.list.map((item,index) => {
           if(index < res.data.list.length -1){
            array.push({
             price:item.price,rebate:item.rebate
           })
           console.log(array)
           }else{
             this.rebate_config = array
             this.maxDiscountRecharge = item.price
             this.maxDiscount = item.rebate
             console.log(array)
         console.log(this.rebate_config)
           }
         })
         
      }
     }else{
      this.$message.error(res.message)
     }
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .pagination {
    margin-top: 12px;
    float: right;
  }

  .bindcard {
    border: 1px dashed #333333;
    margin: 20px;
    height: 96px;
    .addbtn {
      float: right;
      cursor: pointer;
      width: 24px;
      height: 24px;
      top: 0px;
      text-align: center;
      line-height: 24px;
      background-color: #333;
      color: white;
    }
    .bind_title {
      background-color: #240808;
      color: white;
      float: left;
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 24px;
    }
  }
  .addBindCard {
    cursor: pointer;
    text-align: center;
    border: 1px solid #666666;
    color: #666666;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    margin: 0 20px 16px 20px;
  }
  .suffix_icon{
    margin-top: 12px;
  }
  .range-recharge{
    border: 1px dashed #999999;
    margin: 20px 0;
    padding: 20px;
  }
}
</style>